<template>
	<view class="container">
		<view class="header">
			<text class="title">欢迎来到车联网服务平台商家端</text>
			<image class="header-img" src="/static/login_car.png" mode="widthFix" />
		</view>
		<view class="form">
			<input class="input" type="text" placeholder="手机号登陆" v-model="phone" />
			<view class="code-row">
				<input class="input code-input" type="text" placeholder="输入验证码" v-model="code" />
				<button class="code-btn" @click="getCode">获取验证码</button>
			</view>
			<view class="register-row">
				<text class="register-link" @click="goRegister">立即注册&gt;</text>
			</view>
			<button class="login-btn" @click="login">登录</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const phone = ref('');
const code = ref('');
const getCode = () => {
	uni.showToast({ title: '验证码已发送', icon: 'none' });
};
const login = () => {
	uni.navigateTo({ url: '/pages/lsa/shouye/shouye' });
};
const goRegister = () => {
	uni.navigateTo({ url: '/pages/lsa/register/register' });
};
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #fff;
}
.header {
	background: linear-gradient(135deg, #3a8dff 0%, #166dff 100%);
	padding: 40rpx 0 20rpx 0;
	border-bottom-left-radius: 40rpx;
	border-bottom-right-radius: 40rpx;
	text-align: center;
}
.title {
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 16rpx;
}
.header-img {
	width: 220rpx;
	margin: 0 auto 0 auto;
	display: block;
}
.form {
	margin: 40rpx 40rpx 0 40rpx;
}
.input {
	width: 100%;
	height: 88rpx;
	border: none;
	border-bottom: 1px solid #eee;
	font-size: 32rpx;
	margin-bottom: 30rpx;
	padding: 0 20rpx;
	background: #f8f8f8;
}
.code-row {
	display: flex;
	align-items: center;
}
.code-input {
	flex: 1;
}
.code-btn {
	margin-left: 20rpx;
	background: #3a8dff;
	color: #fff;
	border-radius: 40rpx;
	font-size: 28rpx;
	padding: 0 30rpx;
	height: 60rpx;
	line-height: 60rpx;
}
.register-row {
	margin: 20rpx 0 40rpx 0;
	text-align: left;
}
.register-link {
	color: #3a8dff;
	font-size: 28rpx;
}
.login-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(90deg, #3a8dff 0%, #166dff 100%);
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 20rpx;
}
</style>
